<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import dayjs from 'dayjs'
import MusicButton from '@/components/common/MusicButton.vue'
import SongList from '@/views/playlist/SongList.vue'

import { CaretBottom } from '@element-plus/icons-vue'
import { _playlistDetail, _listByPlaylist } from '@/service/song'
import { _recommendSongs } from '@/service/recommend'

import { formatNumber } from '@/utils/format'
import { useCommonStoreHook } from '@/store/modules/common'
import { useSongStoreHook } from '@/store/modules/song'
import { useRecommendHook } from '@/store/modules/recommend'

import type { songItem } from '@/store/modules/types'

const songStore = useSongStoreHook()
const recommendStore = useRecommendHook()
const route = useRoute()
const listId = computed(() => route.params.id)

const playlistInfo = ref<{
  titleImageUrl?: string
  coverImgUrl?: string
  name?: string
  creator: any
  createTime?: number
  subscribedCount?: number
  tags?: string[]
  trackCount?: number
  playCount?: number
  shareCount?: number
  description?: string
}>()
const playlist = ref<songItem[]>([])

watch(
  () => listId.value,
  () => {
    initPlaylist()
  }
)

onMounted(() => {
  initPlaylist()
})
const disabled = ref(false)
const initPlaylist = () => {
  if (listId.value === '1') {
    if (recommendStore.recommendSongs.length > 0) {
      playlist.value = recommendStore.recommendSongs
    } else {
      _recommendSongs().then((res) => {
        playlist.value = res.data.dailySongs
      })
    }
  } else {
    _playlistDetail({ id: listId.value }).then((res) => {
      playlistInfo.value = res.playlist
      disabled.value =
        playlistInfo.value?.creator.userId ===
        useCommonStoreHook().profile.userId
    })
    _listByPlaylist({ id: listId.value }).then((res) => {
      playlist.value = res.songs
    })
  }
}

const isExpand = ref(false)
const expand = () => {
  isExpand.value = !isExpand.value
}

const allPlay = () => {
  songStore.setSonglist(playlist.value)
}

const addSonglist = () => {
  songStore.setSonglist(playlist.value)
}
</script>

<template>
  <div>
    <div class="dailySong" v-if="listId === '1'">
      <div class="flex">
        <i class="icon-rili2"
          ><i class="icon_date">{{ new Date().getDate() }}</i>
        </i>
        <div class="dailySong_tip">
          <p class="dailySong_title">每日歌曲推荐</p>
          <p class="dailySong_text">根据你的音乐口味生成，每天 6:00 更新</p>
        </div>
      </div>
      <div class="mt-2">
        <el-button-group class="mr-2">
          <el-button type="primary" round @click="allPlay"
            ><i class="icon-24gf-play" /> 播放全部
          </el-button>
          <el-button
            style="padding: 0 8px"
            type="primary"
            round
            @click="addSonglist"
            ><i class="icon-Plus"
          /></el-button>
        </el-button-group>

        <MusicButton round>
          <i class="icon-wenjianjia"></i>
          收藏全部
        </MusicButton>
      </div>
    </div>
    <div class="playlist_detail" v-else>
      <div class="playlist_image">
        <img :src="playlistInfo?.coverImgUrl" alt="" />
      </div>
      <div class="playlist_info">
        <p class="playlist_name">{{ playlistInfo?.name }}</p>
        <p class="playlist_creator mt-1">
          <el-avatar
            class="mr-1"
            :size="24"
            :src="playlistInfo?.creator.avatarUrl"
          />
          <span style="color: #85b9e6" class="mr-2">{{
            playlistInfo?.creator.nickname
          }}</span>
          <span style="color: var(--music-link-color)">
            {{ dayjs(playlistInfo?.createTime).format('YYYY-MM-DD') }}创建
          </span>
        </p>
        <div class="mt-1">
          <el-button-group class="mr-2">
            <el-button type="primary" round @click="allPlay"
              ><i class="icon-24gf-play" /> 播放全部
            </el-button>
            <el-button
              style="padding: 0 8px"
              type="primary"
              round
              @click="addSonglist"
              ><i class="icon-Plus"
            /></el-button>
          </el-button-group>

          <MusicButton round :disabled="disabled">
            <i class="icon-wenjianjia"></i>
            已收藏({{
              playlistInfo?.subscribedCount &&
              formatNumber(playlistInfo?.subscribedCount)
            }})
          </MusicButton>

          <MusicButton round>
            <i class="icon-a-fenxiang_fenxiang" />
            已分享({{
              playlistInfo?.shareCount &&
              formatNumber(playlistInfo?.shareCount)
            }})
          </MusicButton>
          <MusicButton round>
            <i class="icon-xiazai1" />
            下载全部
          </MusicButton>
        </div>

        <div class="mt-1 playlist_detail__textarea">
          <p v-if="playlistInfo?.tags.length > 0">
            标签：
            <template v-for="(item, idx) in playlistInfo?.tags" :key="item">
              <i v-if="idx !== 0"> / </i>
              <span style="color: #85b9e6">{{ item }}</span>
            </template>
          </p>
          <p>
            <span class="mr-3">
              歌曲：<i style="color: var(--music-link-color)">{{
                playlistInfo?.trackCount
              }}</i>
            </span>
            <span>
              播放：<i style="color: var(--music-link-color)">{{
                playlistInfo?.playCount && formatNumber(playlistInfo?.playCount)
              }}</i>
            </span>
          </p>
          <div class="playlist_desc" v-if="playlistInfo?.description">
            <p :class="{ ellipsis: !isExpand }">
              简介：<span
                style="color: var(--music-link-color)"
                v-html="playlistInfo?.description.replace(/\n/g, '<br>')"
              ></span>
            </p>
            <el-icon
              class="expand"
              :class="{ rotate: isExpand }"
              @click="expand"
              ><CaretBottom
            /></el-icon>
          </div>
        </div>
      </div>
    </div>

    <SongList :list="playlist" />
  </div>
</template>

<style lang="scss" scoped>
.playlist_detail {
  display: flex;
  font-size: 14px;
  color: var(--music-link-hover-color);
}
.playlist_image {
  width: 180px;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
}
.playlist {
  &_info {
    flex: 1;
    // min-width: 600px;
    overflow: hidden;
    margin-left: 40px;
  }
  &_name {
    font-size: 24px;
    font-weight: bold;
  }
  &_creator {
    line-height: 1.5;
  }
  &_detail__textarea {
    width: 100%;
    overflow: hidden;
  }
  &_desc {
    display: flex;
    justify-content: space-between;
  }
}

.el-avatar {
  vertical-align: middle;
}

[class^='icon'] {
  color: var(--music-link-color);
  font-size: 22px;
  padding-right: 4px;
}
.icon-24gf-play,
.icon-Plus {
  color: #fff;
  font-size: 16px;
}

.expand {
  margin-left: 20px;
  cursor: pointer;
  transition: all 0.4s;
}
.expand.rotate {
  transform: rotate(180deg);
}
.ellipsis {
  height: 22px;
}

.dailySong {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--music-color-5);
  color: var(--music-link-hover-color);
  .dailySong_tip {
    margin-left: 20px;
    line-height: 2;
  }
  .dailySong_title {
    font-size: 24px;
    font-weight: bold;
  }
  .dailySong_text {
    font-size: 14px;
    color: var(--music-link-color);
  }
}
.flex {
  display: flex;
  align-items: center;
}
.icon-rili2 {
  font-size: 112px;
  color: var(--music-base-color);
  position: relative;
  .icon_date {
    font-size: 58px;
    font-weight: bold;
    color: var(--music-base-color);
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
